<template>
  <!-- 用户登录记录 -->
  <div class="app-container">
    <div class="app-wrap">
      <search-table ref="table" :table-loading="listLoading" :table-data="loginDataList" @query="getLoginList(true)" @reset="refresh">
        <template v-slot:row>
          <el-form-item label="用户ID:" label-width="60px">
            <el-input type="number" v-model="listQuery.user_id" clearable placeholder="请输入用户ID"></el-input>
          </el-form-item>
          <el-form-item label="登录时间:" label-width="80px">
            <el-date-picker is-range v-model="listQuery.loginTime" type="datetimerange" range-separator="至" 
            start-placeholder="开始日期" end-placeholder="结束日期" class="full-width-input time-box" 
            :default-time="['00:00:00', '23:59:59']" :clearable="false"></el-date-picker>
          </el-form-item>
        </template>
        <template v-slot:actions>
          <el-button type="info" size="mini" icon="el-icon-refresh" @click="getLoginList">刷新</el-button>
        </template>
        <template>
          <el-table-column prop="time" label="登录时间" align="center" width="200"/>
          <el-table-column prop="user_id" label="用户ID" align="center" width="120"/>
          <el-table-column prop="agent_id" label="渠道名" align="center" width="200" show-overflow-tooltip>
            <template slot-scope="scope">
              <span v-show="scope.row.agent_id">【{{scope.row.agent_id}}】{{ $public.channelLabel(scope.row.agent_id) }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="device_model" label="设备型号" align="center" width="180"/>
          <el-table-column prop="login_ip" label="登录IP" align="center" width="150"/>
          <el-table-column prop="device_system_version" label="设备系统版本" align="center" />
          <el-table-column prop="device_system_type" label="设备系统大类" align="center"/>
        </template>
        <template v-slot:footer>
          <pagination :total="currentTotal" :page.sync="listQuery.page" :limit.sync="listQuery.size" @pagination="getLoginList" />
        </template>
      </search-table>
    </div>
  </div>
</template>

<script>
import {
  throttle
} from '@/utils/index'
import {
  userLogin
} from '@/api/player'

import SearchTable from '@/components/SearchTable'
export default {
  name: 'register',
  components: {
    SearchTable
  },
  data () {
    return {
      listQuery: {
        page: 1,
        size: 50,
        user_id:'',
        loginTime:[this.$public.getDateDay(0)+' 00:00:00',this.$public.getDateDay(0)+' 23:59:59'],
        login_time_start: 0, //登录开始时间
        login_time_end: 0, //登录结束时间
      },
      listLoading: true,
      loginDataList: [],
      currentTotal: 0,
    }
  },
  created () {},
  activated(){
    this.getLoginList();
  },
  methods: {
    // 获取登录列表
    async getLoginList (query) {
      let that = this,params=that.listQuery;
      if(query && !query.page){
        params.page=1
        params.size=50
      }
      that.loginDataList = []
      if (params.loginTime && params.loginTime[0] && params.loginTime[1]) {
        params.login_time_start = that.$public.standardDate(params.loginTime[0])
        params.login_time_end = that.$public.standardDate(params.loginTime[1])
      } else {
        params.login_time_start=''
        params.login_time_end=''
      }
      const response = await userLogin(params)
      if (response.code == 1) {
        if (response.data.list) {
          response.data.list.forEach(item=>{
            item.time=that.$public.standardDate(item.time)
          })
          that.loginDataList = response.data.list
          that.currentTotal = response.data.total
        }
      }else{
        that.$message.error(response.msg)
      }
      that.listLoading = false
    },
    // 刷新
    refresh: throttle(function () {
      this.listQuery = {
        page: 1,
        size: 50,
        user_id:'',
        loginTime:[this.$public.getDateDay(0)+' 00:00:00',this.$public.getDateDay(0)+' 23:59:59'],
        login_time_start: 0, //登录开始时间
        login_time_end: 0, //登录结束时间
      }
      this.getLoginList()
    }, 2000),
  }
}
</script>

<style lang="scss" scoped>
.nameInfo {
  color: #409EFF;
  padding-bottom: 2px;
  border-bottom:1px solid #409EFF;
  cursor: pointer;
}
</style>
